<template>
	<div class="search">
		<div class="search_header">
			<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
		</div>
		<div class="content">
			
			<div class="history"  v-if="isshow">
				<uni-section class="mb-10" title="历史搜索" type="line">
					<template v-slot:right>
						<uni-icons type="trash" size="20" @click="del"></uni-icons>
					</template>
					<div class="icon" style="margin:3%;display: inline-block;"  v-for="item in options" :key="item" @click="go(item)">{{item}}</div>
				</uni-section>
			</div>
			<div class="hot">
				<uni-section class="mb-10" title="热门讨论" type="line">
					<p v-for="item in hotom" :key="item.name" style="padding-left: 3%;margin-bottom: 3%;">{{item.name}}
					</p>
				</uni-section>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				options:uni.getStorageSync('history'),
				isshow:false,
				hotom: [{
						name: "奶茶究竟应该怎么扔？ "
					},
					{
						name: "垃圾分类 "
					},
					{
						name: "回收时间表？ "
					},
					{
						name:"怎么识别垃圾种类"
					}
				]
			}
		},
		methods: {
			search(res) {
				console.log(res.value)
				let datas=uni.getStorageSync('history')
				console.log(datas)
				let index=datas.findIndex(item=>item===res.value)
				if(index==-1){
					datas.unshift(res.value)
					uni.setStorageSync('history',datas)
				}else{
					let first=datas.splice(index,1)
					datas.unshift(first[0])
					uni.setStorageSync('history',datas)
				}
				uni.redirectTo({
					url:"/pages/search/searchend?value="+res.value
				})
				
			},
			del(){
					uni.setStorageSync('history',[]);
					this.isshow=false
			},
			go(item){
				console.log(item)
				let datas=uni.getStorageSync('history')
				let index=datas.findIndex(item1=>item1===item)
				let first=datas.splice(index,1)
				datas.unshift(first[0])
				uni.setStorageSync('history',datas)
				uni.redirectTo({
					url:"/pages/search/searchend?value="+item
				})
				
			}

		},
		onReady() {
			if(!uni.getStorageSync('history')){
				uni.setStorageSync('history',[])
			}
			 if(uni.getStorageSync('history').length!=0){
				this.isshow=true
			}
			if(uni.getStorageSync('history').length==0){
				this.isshow=false
			}
			
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style>
	.search {
		width: 100vw;
	}

	.search_header {
		width: 100%;
		height: 8vh;
		background: #2bcddd;
	}

	.search .content {
		width: 100%;
		
	}

	.search .content .hot {
		width: 100%;
	
	}
	.search .content .icon{
		padding: 0 10px;
		height: 3vh;
		line-height: 3vh;
		background: #2bcddd;
		text-align: center;
		border-radius: 50px;
		color: white;
	}
</style>